<template>
	<view
		class="gy-navbar"
		:style="{
			paddingTop: (menuButtonInfo ? menuButtonInfo.top - ((46 - menuButtonInfo.height) / 2) : 0) + 'px',
			backgroundColor: bgColor,
			color: color,
			backgroundImage: bgImage
		}">
		<view v-if="back" class="gy-navbar-back" @click.stop="backFn">
			<!-- <view v-if="isBackHome" class="gy-navbar-back-home">
				<com-icon name="gy_icon_home" color="#000000" :size="30" />
			</view>
			<com-icon v-else name="gy_icon_arrowLeft" color="#000000" /> -->
			<com-icon name="gy_icon_arrowLeft" color="#000000" />
		</view>
		<view
			class="gy-navbar-title"
			:style="{
				paddingLeft: menuButtonInfo ? systemInfo.screenWidth - menuButtonInfo.left - 46 + 'px' : 0,
				paddingRight: menuButtonInfo ? systemInfo.screenWidth - menuButtonInfo.left + 5 + 'px' : 0
			}">
			{{ title }}
		</view>
		<!-- #ifdef H5 -->
		<view class="gy-navbar-action">
			<slot name="action"></slot>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		name: "gy-navbar",
		props:{
			title: {
				type: String
			},
			bgColor: {
				type: String
			},
			bgImage: {
				type: String
			},
			color: {
				type: String
			},
			back: {
				type: Boolean,
				default: true
			},
			backOnLoad: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isBackHome: false,
				pages: [],
				systemInfo: uni.getSystemInfoSync(),
				// #ifdef H5
				menuButtonInfo: null,
				// #endif
				// #ifdef MP-WEIXIN
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(),
				// #endif
			}
		},
		created() {
			// #ifdef H5
			this.$emit("height", 46);
			// #endif
			// #ifdef MP-WEIXIN
			this.menuButtonInfo.allHeight = 46 + this.menuButtonInfo.top - ((46 - this.menuButtonInfo.height) / 2);
			this.$emit("height", this.menuButtonInfo.allHeight);
			// #endif
		},
		mounted() {
			this.pages = getCurrentPages();
			this.isBackHome = this.pages.length === 1;
		},
		methods:{
			backFn(){
				if(this.isBackHome){
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}else{
				　　	uni.navigateBack({
						animationType: 'pop-out',
						animationDuration: 200,
					　　	success: () => {
							if(this.backOnLoad && this.pages[this.pages.length - 2].onLoad){
								this.pages[this.pages.length - 2].onLoad(this.pages[this.pages.length - 2].options);
							}
					　　	}
				　　	});
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.gy-navbar{
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		height: 46px;
		z-index: 2000;
		background-color: var(--gy-color-primary);
		color: #ffffff;
		display: flex;
		animation: gy-navbar-show .3s;
		animation-fill-mode: forwards;
		box-sizing: content-box;
		.gy-navbar-back,
		.gy-navbar-action{
			width: 46px;
			@include flex-center-center;
		}
		.gy-navbar-back,
		.gy-navbar-title,
		.gy-navbar-action{
			height: 46px;
		}
		.gy-navbar-back{
			font-size: 32rpx;
			.gy-navbar-back-home{
				width: 55rpx;
				height: 55rpx;
				border-radius: 50%;
				@include flex-center-center;
				background-color: #999999;
				:deep(.gy-icon){
					font-weight: bold;
				}
			}
		}
		.gy-navbar-back:active,
		.gy-navbar-action:active{
			opacity: 0.8;
		}
		.gy-navbar-title{
			flex: 1;
			line-height: 46px;
			text-align: center;
			font-size: var(--gy-font-size-base);
			padding: 0 20rpx;
		}
	}
	@keyframes gy-navbar-show {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}
</style>
